<!-- 首页 -->
<template>
  <div class="map">
    <video
      :src="videoBg"
      id="rocketBg"
      class="rocketBg"
      muted
      loop
      autoplay="autoplay"
    ></video>
    <div class="animate__animated animate__backInDown" v-if="showA == 0">
      <div class="map-box">
        <div class="map">
          <div class="map-self">
            <div class="title" onselectstart="return false;">
              <div class="tit-a"><span></span>我们的愿景</div>
              <div class="tit-b">
                成为覆盖全中国的县域互联网+服务商，<br />
                并在每个县（区）建立一个“互联网+解决方案服务体验中心”
              </div>
            </div>
            <div id="map"></div>
          </div>
        </div>
        <img
          src="@/assets/icon-05.png"
          class="icon"
          v-show="show"
          @click="show = false"
          ondragstart="return false;"
        />
      </div>
    </div>
    <div class="rocket" @click="toUrl"></div>
    <div v-if="showA == 1" class="map2 animate__animated animate__backInDown">
      <div class="icon-view">
        <img src="@/assets/icon-20.png" class="icon-img" />
        <slot>
          <p>江西</p>
        </slot>
      </div>
      <div class="icon-view icon-view2" @click="toReturn()">
        <img src="@/assets/icon-20.png" class="icon-img" />
        <slot>
          <p>返回</p>
        </slot>
      </div>
      <div class="text-view">
        <img src="@/assets/text2.png" class="icon-img" />
        <img src="@/assets/text1.png" class="icon-img" />
      </div>
      <div class="map2">
        <div id="map2"></div>
        <div
          :class="item.class"
          @click="toShowInfo(item.id)"
          v-for="(item, index) in list"
          :key="index"
        >
          <img src="@/assets/icon.png" />
          <div>{{ item.name }}</div>
        </div>
        <div class="icon-name icon-name3">
          <img src="@/assets/icon-05.png" />
          <div>南昌市</div>
        </div>
        <div class="city">赣州市</div>
        <div class="city city2">抚州市</div>
        <div class="city city3">萍乡市</div>
        <div class="city city4">新余市</div>
        <div class="city city5">宜春市</div>
        <div class="city city6">九江市</div>
        <div class="city city7">上饶市</div>
        <div class="city city8">景德镇市</div>
        <div class="city city9">鹰潭市</div>
        <div class="city city10">吉安市</div>
      </div>
      <!-- 进贤 -->
      <div
        v-if="jinxain"
        class="jinxianShow animate__animated animate__fadeInDown"
        :class="{
          videoQuan: videoQuan,
          sId1: showId == 1,
          sId4: showId == 4,
          sId5: showId == 5,
          sId6: showId == 6,
          sId8: showId == 8,
          sId9: showId == 9,
          sId10: showId == 10,
          sId15: showId == 15,
          sId18: showId == 18,
          sId20: showId == 20,
          sId22: showId == 22,
          sId23: showId == 23,
          sId27: showId == 27,
          sId26: showId == 26,
          sId28: showId == 28,
          sId49: showId == 49,
          imgNone: img.length == 0,
        }"
      >
        <div class="border" v-if="showId == 1">
          <img src="@/assets/border/1.png" />
        </div>
        <div class="border" v-if="showId == 4">
          <img src="@/assets/border/4.png" />
        </div>
        <div class="border" v-if="showId == 18 || showId == 22">
          <img src="@/assets/border/4.png" />
        </div>
        <div class="border" v-if="showId == 26">
          <img src="@/assets/border/2.png" />
        </div>
        <div class="border" v-if="showId == 20">
          <img src="@/assets/border/4.png" />
        </div>
        <div class="border" v-if="showId == 5">
          <img src="@/assets/border/5.png" />
        </div>
        <div
          class="border"
          v-if="showId == 6 || showId == 28 || showId == 49 || showId == 27"
        >
          <img src="@/assets/border/6.png" />
        </div>
        <div class="border" v-if="showId == 8">
          <img src="@/assets/border/8.png" />
        </div>
        <div class="border" v-if="showId == 9">
          <img src="@/assets/border/9.png" />
        </div>
        <div class="border" v-if="showId == 10">
          <img src="@/assets/border/10.png" />
        </div>
        <div class="border" v-if="showId == 15">
          <img src="@/assets/border/12.png" />
        </div>
        <div class="border" v-if="showId == 23">
          <img src="@/assets/border/9.png" />
        </div>
        <div class="zhan-infos" :data-id="showId">
          <div>
            公司名称：<span class="spanC">{{ com }}</span>
          </div>
        </div>
        <div
          v-if="
            showId == 15 ||
            showId == 4 ||
            showId == 5 ||
            showId == 20 ||
            showId == 27 ||
            showId == 26
          "
          style="
            height: 100%;
            position: relative;
            z-index: 20;
            background: black;
          "
        >
          <video :src="img[0]" id="jinxian" autoplay="autoplay"></video>
          <div class="quan" @click="quan()">
            <img src="@/assets/quan.png" />
          </div>
          <div class="del" @click="del()">
            <img src="@/assets/del.png" />
          </div>
        </div>
        <div class="swiper-container" v-else>
          <div class="swiper-wrapper" v-if="img.length != 0">
            <div
              class="swiper-slide"
              style="transform: translate3d(0, 0, 0); overflow: hidden"
              v-for="(item, index) in img"
              :key="index"
            >
              <img :src="item" />
            </div>
          </div>
          <div class="swiper-pagination" v-if="img.length != 0"></div>
          <div class="content-item" v-if="img.length != 0">
            <div class="page-click pagelt swiper-button-prev" @click="toPre()">
              <img src="@/assets/prev.png" alt="" />
            </div>
            <div class="page-click pagert swiper-button-next" @click="toNext()">
              <img src="@/assets/next.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 吉安 -->
      <div
        v-if="jian"
        class="jinxianShow2 animate__animated animate__backInDown"
        :class="{
          videoQuan2: videoQuan2,
          sId2: showId == 2,
          sId3: showId == 3,
          sId7: showId == 7,
          sId11: showId == 11,
          sId45: showId == 45,
          sId46: showId == 46,
          sId12: showId == 12,
          sId13: showId == 13,
          sId14: showId == 14,
          sId16: showId == 16,
          sId36: showId == 36,
          sId37: showId == 37,
          sId38: showId == 38,
          sId39: showId == 39,
          sId40: showId == 40,
          sId41: showId == 41,
          sId42: showId == 42,
          sId43: showId == 43,
          sId44: showId == 44,
          sId30: showId == 30,
          sId17: showId == 17,
          sId19: showId == 19,
          sId21: showId == 21,
          sId29: showId == 29,
          sId31: showId == 31,
          sId32: showId == 32,
          sId33: showId == 33,
          sId34: showId == 34,
          sId36: showId == 36,
          sId37: showId == 37,
          sId38: showId == 38,
          sId39: showId == 39,
          sId40: showId == 40,
          sId41: showId == 41,
          sId42: showId == 42,
          sId43: showId == 43,
          sId44: showId == 44,
          sId47: showId == 47,
          sId48: showId == 48,
          sId50: showId == 50,
          imgNone: img.length == 0,
        }"
      >
        <div class="zhan-infos">
          <div>
            公司名称：<span class="spanC">{{ com }}</span>
          </div>
        </div>
        <div
          v-if="
            showId == 16 ||
            showId == 17 ||
            showId == 29 ||
            showId == 30 ||
            showId == 34 ||
            showId == 32 ||
            showId == 19 ||
            showId == 33 ||
            showId == 36 ||
            showId == 37 ||
            showId == 38 ||
            showId == 39 ||
            showId == 40 ||
            showId == 41 ||
            showId == 42 ||
            showId == 43 ||
            showId == 44
          "
          style="
            height: 100%;
            position: relative;
            z-index: 20;
            background: black;
          "
        >
          <video :src="img[0]" id="jian" autoplay="autoplay"></video>
          <div class="quan quan2" @click="quan2()">
            <img src="@/assets/quan.png" />
          </div>
          <div class="del del2" @click="del2()">
            <img src="@/assets/del.png" />
          </div>
        </div>
        <div class="swiper-container" v-else>
          <div class="swiper-wrapper" v-if="img.length != 0">
            <div
              class="swiper-slide"
              style="transform: translate3d(0, 0, 0); overflow: hidden"
              v-for="(item, index) in img"
              :key="index"
            >
              <img :src="item" />
            </div>
          </div>
          <div class="swiper-pagination" v-if="img.length != 0"></div>
          <div class="content-item" v-if="img.length != 0">
            <div class="page-click pagelt swiper-button-prev" @click="toPre()">
              <img src="@/assets/prev.png" alt="" />
            </div>
            <div class="page-click pagert swiper-button-next" @click="toNext()">
              <img src="@/assets/next.png" alt="" />
            </div>
          </div>
        </div>
        <div class="border border2" v-if="showId == 2">
          <img src="@/assets/border/2.png" />
        </div>
        <div
          class="border border2"
          v-if="
            showId == 3 ||
            showId == 31 ||
            showId == 47 ||
            showId == 48 ||
            showId == 50
          "
        >
          <img src="@/assets/border/3.png" />
        </div>
        <div class="border border2" v-if="showId == 7">
          <img src="@/assets/border/7.png" />
        </div>
        <div
          class="border border2"
          v-if="showId == 11 || showId == 34 || showId == 45 || showId == 46"
        >
          <img src="@/assets/border/11.png" />
        </div>
        <div class="border border2" v-if="showId == 12">
          <img src="@/assets/border/11.png" />
        </div>
        <div class="border border2" v-if="showId == 13">
          <img src="@/assets/border/11.png" />
        </div>
        <div class="border border2" v-if="showId == 14">
          <img src="@/assets/border/11.png" />
        </div>
        <div
          class="border border2"
          v-if="
            showId == 16 ||
            showId == 30 ||
            showId == 29 ||
            showId == 36 ||
            showId == 37 ||
            showId == 38 ||
            showId == 39 ||
            showId == 40 ||
            showId == 41 ||
            showId == 42 ||
            showId == 43 ||
            showId == 44
          "
        >
          <img src="@/assets/border/13.png" />
        </div>
        <div class="border border2" v-if="showId == 17">
          <img src="@/assets/border/3.png" />
        </div>
        <div
          class="border border2"
          v-if="showId == 19 || showId == 32 || showId == 33"
        >
          <img src="@/assets/border/7.png" />
        </div>
        <div class="border border2" v-if="showId == 21">
          <img src="@/assets/border/11.png" />
        </div>
        <!-- <div class="border border2" v-if="showId == 26">
          <img src="@/assets/border/2.png" />
        </div> -->
      </div>
    </div>
    <!-- 湖南 -->
    <div v-if="showA == 2" class="map2 animate__animated animate__backInDown">
      <div class="icon-view">
        <img src="@/assets/icon-20.png" class="icon-img" />
        <slot>
          <p>湖南</p>
        </slot>
      </div>
      <div class="icon-view icon-view2" @click="toReturn()">
        <img src="@/assets/icon-20.png" class="icon-img" />
        <slot>
          <p>返回</p>
        </slot>
      </div>
      <div class="map2">
        <div id="map2"></div>
      </div>
      <div class="text-view">
        <img src="@/assets/text2.png" class="icon-img" />
        <img src="@/assets/text1.png" class="icon-img" />
      </div>
        <!-- 湖南 -->
    <div v-if="showHU">
      <div
        class="jinxianShow jinxianShow3 animate__animated animate__fadeInDown"
        :class="{
          huQuan: huQuan,
        }"
      >
        <!-- <div class="border">
          <img src="@/assets/border/2.png" />
        </div> -->
        <div class="del del2" @click="del3()">
          <img src="@/assets/del.png" />
        </div>
        <div class="quan quan2" @click="quan3()">
          <img src="@/assets/quan.png" />
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper" v-if="hunanList.length != 0">
            <div
              class="swiper-slide"
              style="transform: translate3d(0, 0, 0); overflow: hidden"
              v-for="(item, index) in hunanList"
              :key="index"
            >
              <img :src="item.path" style="width: 100%" />
            </div>
          </div>
          <div class="swiper-pagination" v-if="hunanList.length != 0"></div>
          <div class="content-item" v-if="hunanList.length != 0">
            <div class="page-click pagelt swiper-button-prev" @click="toPre()">
              <img src="@/assets/prev.png" alt="" />
            </div>
            <div class="page-click pagert swiper-button-next" @click="toNext()">
              <img src="@/assets/next.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  
  </div>
</template>

<script>
let mySwiper;
import china from "@/until/china";
import jiangxi from "@/until/jiangxi2";
import Swiper from "swiper";
import hunan from "@/until/hunan";
import { geoCoordMap, chinaProvinces } from "@/until/road";
import { getPath, getList } from "@/api/apiData";

import Icon from "@/components/icon";
export default {
  components: { Icon },
  data() {
    return {
      showHU: false,
      huQuan: false,
      videoBg: "",
      show: false,
      showA: 0,
      jinxain: false,
      rock: "",
      jian: false,
      videoQuan: false,
      videoQuan2: false,
      showId: "",
      img: "",
      hunanList: [],
      list: [
        {
          id: 1,
          class: "icon-name",
          name: "金溪县",
          people: "熊会民",
          phone: "13907943922",
          addr: "抚州市金溪县金碧华府84号",
          company: "金溪县熊二文化传媒科技有限公司",
          img: [],
        },
        {
          id: 2,
          class: "icon-name icon-name5",
          name: "安义县",
          people: "彭雷禹",
          phone: "18679112995",
          addr: "安义县安义客运站东商业街126号数字产业园666号",
          company: "江西沛腾科技运营有限公司",
          img: [],
        },
        {
          id: 3,
          class: "icon-name icon-name6",
          name: "武宁县",
          people: "钱广存",
          phone: "18970227866",
          addr: "江西唐鼎科技有限公司",
          company: "九江市武宁县武宁工业园",
          img: "",
        },
        {
          id: 4,
          class: "icon-name icon-name7",
          name: "信州区",
          people: "陈小芬",
          addr: "江西省上饶市广信区凤凰西大道阳光时代A座602",
          phone: "18770347988",
          company: "上饶市超越文化传播有限公司",
          img: "",
        },
        {
          id: 5,
          class: "icon-name icon-name8",
          name: "广信区",
          people: "陈小芬",
          addr: "江西省上饶市广信区凤凰西大道阳光时代A座602",
          phone: "18770347988",
          company: "上饶市超越文化传播有限公司",
          img: "",
        },
        {
          id: 6,
          class: "icon-name icon-name9",
          name: "月湖区",
          people: "王新芳",
          addr: "江西省鹰潭市月湖区",
          phone: "13407012021",
          company: "鹰潭可奕网络科技有限公司",
          img: "",
        },
        // {
        //   id: 7,
        //   class: "icon-name icon-name9 icon-name11",
        //   name: "德安县",
        //   people: "万海燕",
        //   phone: "15949531663",
        //   addr: "九江市德安县祥宁居门面开元广告",
        //   company: "德安县开元广告制品店",
        //   img: [],
        // },
        {
          id: 8,
          class: "icon-name icon-name9 icon-name12",
          name: "资溪县",
          people: "张凯",
          phone: "15559163007",
          addr: "江西省抚州市金溪县新华都四楼",
          company: "金溪县新华都",
          img: [],
        },
        {
          id: 9,
          class: "icon-name icon-name9 icon-name13",
          name: "瑞金市",
          people: "王强",
          phone: "15970726188",
          addr: "江西省瑞金市象湖镇金都大道金宏大酒店旁",
          company: "瑞金市宏都广告有限公司",
          img: [],
        },
        // {
        //   id: 10,
        //   class: "icon-name icon-name9 icon-name14",
        //   name: "会昌县",
        //   people: "王强",
        //   addr: "江西省瑞金市象湖镇金都大道金宏大酒店旁",
        //   phone: "15970726188",
        //   company: "瑞金市宏都广告有限公司",
        //   img: [],
        // },
        {
          id: 11,
          class: "icon-name icon-name9 icon-name15",
          name: "樟树市",
          people: "张欠儿",
          addr: "樟树市香格里拉A区门口美旋广告",
          phone: "13979588835",
          company: "江西美璇广告传媒有限责任公司",
          img: "",
        },
        {
          id: 15,
          class: "icon-name icon-name4",
          name: "进贤县",
          people: "刘跃峰",
          addr: "南昌市进贤县民和镇邓付路67号贤飞网",
          phone: "13330122233",
          company: "南昌市千年文化传媒有限公司",
          img: [],
        },
        {
          id: 16,
          class: "icon-name icon-name2",
          name: "吉州区",
          people: "李永平",
          addr: "吉安市吉州区吉安总商会大厦2401",
          phone: "13657969035",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 17,
          class: "icon-name icon-name6  icon-name21",
          name: "修水县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西中鲲文化传媒有限公司",
          img: [],
        },
        {
          id: 18,
          class: "icon-name icon-name9 icon-name22",
          name: "珠山区",
          people: "吴昌昊",
          phone: "18679939995",
          addr: "景德镇市昌江区豪德二期五街三号",
          company: "峰景广告装饰有限公司",
          img: [],
        },
        {
          id: 19,
          class: "icon-name icon-name9 icon-name23",
          name: "浔阳区",
          people: "汪建军",
          phone: "18679226626",
          addr: "江西省九江市浔阳区人民路351-355号桃园新居c栋09",
          company: "九江美达广告装饰工程有限公司",
          img: [],
        },
        {
          id: 20,
          class: "icon-name icon-name9 icon-name24",
          name: "鄱阳县",
          people: "程童清",
          phone: "18379921999",
          addr: "上饶市鄱阳县饶州街道办水岸观园5栋5-21号",
          company: "江西百程互联科技有限公司",
          img: [],
        },
        {
          id: 21,
          class: "icon-name icon-name9 icon-name25",
          name: "莲花县",
          people: "刘云飞",
          phone: "13829151319",
          addr: "江西省萍乡市莲花县工业园劳动就业局二楼",
          company: "江西云匠人力资源有限公司",
          img: [],
        },
        {
          id: 22,
          class: "icon-name icon-name9 icon-name26",
          name: "浮梁县",
          people: "周兴德",
          phone: "13979856786",
          addr: "江西省景德镇市珠山区马鞍山路39号商住楼三山公寓A栋2号店面",
          company: "景德镇市恒印图文有限公司",
          img: [],
        },
        {
          id: 23,
          class: "icon-name icon-name9 icon-name27",
          name: "于都县",
          people: "胡许平、孙铭",
          phone: "",
          addr: "赣州市于都县贡江镇长征村（乐都后面）爱莲路北侧",
          company: "赣州开启广告有限公司",
          img: [],
        },
        // {
        //   id: 24,
        //   class: "icon-name icon-name9 icon-name28",
        //   name: "南丰县",
        //   people: "",
        //   phone: "",
        //   addr: "",
        //   company: "-",
        //   img: [],
        // },
        // {
        //   id: 25,
        //   class: "icon-name icon-name9 icon-name29",
        //   name: "南城县",
        //   people: "",
        //   phone: "",
        //   addr: "",
        //   company: "-",
        //   img: [],
        // },
        {
          id: 26,
          class: "icon-name icon-name9 icon-name30",
          name: "奉新县",
          people: "",
          phone: "",
          addr: "",
          company: "奉新品丞美业网络科技有限公司",
          img: [],
        },
        {
          id: 27,
          class: "icon-name icon-name9 icon-name31",
          name: "万年县",
          people: "",
          phone: "",
          addr: "",
          company: "江西神火文化传媒有限公司",
          img: [],
        },
        {
          id: 28,
          class: "icon-name icon-name9 icon-name32",
          name: "德兴市",
          people: "",
          phone: "",
          addr: "",
          company: "德兴市东方广告服务中心",
          img: [],
        },
        {
          id: 16,
          class: "icon-name icon-name6  icon-name33",
          name: "吉安县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 29,
          class: "icon-name icon-name6  icon-name34",
          name: "青原区",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 31,
          class: "icon-name icon-name6  icon-name35",
          name: "瑞昌市",
          people: "丁文锋",
          phone: "13879248688",
          addr: "",
          company: "瑞昌市天成文化传媒有限公司",
          img: [],
        },
        {
          id: 32,
          class: "icon-name icon-name6  icon-name36",
          name: "濂溪区",
          people: "丁文锋",
          phone: "13879248688",
          addr: "",
          company: "九江美达广告装饰工程有限公司",
          img: [],
        },
        {
          id: 33,
          class: "icon-name icon-name6  icon-name37",
          name: "柴桑区",
          people: "丁文锋",
          phone: "13879248688",
          addr: "",
          company: "九江美达广告装饰工程有限公司",
          img: [],
        },
        {
          id: 34,
          class: "icon-name icon-name6  icon-name38",
          name: "宜丰县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "",
          company: "江西洋舟文化传媒有限公司",
          img: [],
        },
        {
          id: 35,
          class: "icon-name icon-name6  icon-name39",
          name: "广昌县",
          people: "",
          phone: "",
          addr: "",
          company: "",
          img: [],
        },
        {
          id: 36,
          class: "icon-name icon-name6 icon-name34 icon-name40",
          name: "吉水县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 37,
          class: "icon-name icon-name6 icon-name34 icon-name41",
          name: "遂川县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 38,
          class: "icon-name icon-name6 icon-name34 icon-name42",
          name: "万安县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 39,
          class: "icon-name icon-name6 icon-name34 icon-name43",
          name: "泰和县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 40,
          class: "icon-name icon-name6 icon-name34 icon-name44",
          name: "井冈山市",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 41,
          class: "icon-name icon-name6 icon-name34 icon-name45",
          name: "永新县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 42,
          class: "icon-name icon-name6 icon-name34 icon-name46",
          name: "永丰县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 43,
          class: "icon-name icon-name6 icon-name34 icon-name47",
          name: "井开区",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 44,
          class: "icon-name icon-name6 icon-name34 icon-name48",
          name: "庐陵新区",
          people: "丁文锋",
          phone: "13879248688",
          addr: "江西省九江市修水县义宁镇金域名都14栋",
          company: "江西礼华广告装饰有限责任公司",
          img: [],
        },
        {
          id: 45,
          class: "icon-name icon-name6 icon-name15 icon-name49",
          name: "袁州区",
          people: "",
          phone: "",
          addr: "",
          company: "江西立闻传媒有限公司",
          img: [],
        },
        {
          id: 46,
          class: "icon-name icon-name6 icon-name15 icon-name50",
          name: "万载县",
          people: "",
          phone: "",
          addr: "",
          company: "江西立闻传媒有限公司",
          img: [],
        },
        {
          id: 47,
          class: "icon-name icon-name6 icon-name35 icon-name51",
          name: "德安县",
          people: "",
          phone: "",
          addr: "",
          company: "九江龙俊建筑工程有限公司",
          img: [],
        },
        {
          id: 48,
          class: "icon-name icon-name6 icon-name35 icon-name52",
          name: "共青城市",
          people: "",
          phone: "",
          addr: "",
          company: "九江龙俊建筑工程有限公司",
          img: [],
        },
        {
          id: 49,
          class: "icon-name icon-name6 icon-name32 icon-name53",
          name: "弋阳县",
          people: "",
          phone: "",
          addr: "",
          company: "江西云数能信息技术有限公司",
          img: [],
        },
        {
          id: 50,
          class: "icon-name icon-name6  icon-name35 icon-name54",
          name: "彭泽县",
          people: "丁文锋",
          phone: "13879248688",
          addr: "",
          company: "九江市康龙广告有限公司",
          img: [],
        },
      ],
      com: "",
      addr: "",
      people: "",
      phone: "",
      img: [],
    };
  },
  computed: {},
  methods: {
    toPre() {
      mySwiper.slidePrev();
    },
    toNext() {
      mySwiper.slideNext();
    },
    // 全屏
    quan() {
      this.videoQuan = !this.videoQuan;
    },
    quan2() {
      this.videoQuan2 = !this.videoQuan2;
    },
    quan3() {
      this.huQuan = !this.huQuan;
    },
    del() {
      this.jinxain = false;
    },
    del2() {
      this.jian = false;
    },
    del3() {
      this.showHU = false;
    },
    swiperMain() {
      mySwiper = new Swiper(".swiper-container", {
        slidesPerView: "auto",
        observer: true,
        observerParents: true,
        // loopSliders:1,
        longSwipesRatio: 0,
        loop: true,
        // 如果需要前进后退按钮
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
    // randomData() {
    //   return Math.round(Math.random() * 500);
    // },

    // 调用echarts
    getmyChart() {
      var that = this;
      let myChart = that.$echarts.init(document.getElementById("map"));
      // //console.log(china);
      that.$echarts.registerMap("china", china);
      var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
      // 流向开始
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = geoCoordMap[dataItem[0].name];
          var toCoord = geoCoordMap[dataItem[1].name];
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord, // 起点坐标
              },
              {
                coord: toCoord, // 终点坐标
              },
            ]);
          }
        }
        return res;
      };

      var color = ["#FDDE18", "#D03802"]; // 自定义图中要用到的颜色
      var series = []; // 用来存储地图数据
      // 起点
      [["江西", chinaProvinces]].forEach(function (item, i) {
        series.push(
          {
            // 白色航线特效图
            type: "lines",
            zlevel: 1, // 用于分层，z-index的效果
            effect: {
              show: true, // 动效是否显示
              period: 6, // 特效动画时间
              trailLength: 0.7, // 特效尾迹的长度
              color: "#FDDE18", // 特效颜色
              symbolSize: 3, // 特效大小
            },
            lineStyle: {
              normal: {
                // 正常情况下的线条样式
                color: color[0],
                width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
                curveness: -0.2, // 线条曲度
              },
            },
            data: convertData(item[1]), // 特效的起始、终点位置
          },
          {
            // 小飞机航线效果
            type: "lines",
            zlevel: 2,
            //symbol: ['none', 'arrow'],   // 用于设置箭头
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              // symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
              symbolSize: 5,
            },

            lineStyle: {
              normal: {
                color: color[0],
                width: 1,
                opacity: 0.6,
                curveness: -0.2,
              },
            },
            data: convertData(item[1]), // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
          },
          {
            // 散点效果
            type: "effectScatter",
            coordinateSystem: "geo", // 表示使用的坐标系为地理坐标系
            zlevel: 3,
            rippleEffect: {
              brushType: "stroke", // 波纹绘制效果
            },
            label: {
              normal: {
                // 默认的文本标签显示样式
                show: true,
                position: "left", // 标签显示的位置
                formatter: "{b}", // 标签内容格式器
                fontSize: 13,
              },
            },
            itemStyle: {
              normal: {
                color: "#ffffff", //color[0]
              },
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name], // 起点的位置
                symbolSize: dataItem[1].value / 4, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
              };
            }),
          }
        );
      });

      // 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
      series.push({
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 3,
        rippleEffect: {
          brushType: "stroke",
        },

        label: {
          normal: {
            show: true,
            position: "left",
            formatter: "{b}",
          },
        },
        symbolSize: function (val) {
          return val[2] / 8;
        },
        itemStyle: {
          normal: {
            color: color[1],
          },
        },
        data: [
          {
            name: "江西",
            selected: false,
            value: [115.732975, 27.636112, 100],
            label: {
              normal: {
                position: "right",
                fontSize: 18,
                fontWeight: 800,
              },
            },
          },
        ],
      });
      // 流向结束

      const optionMap = {
        tooltip: {
          trigger: "item",
          //   formatter: "{b}<br/>{c}(人)"
        },
        geo: {
          type: "map",
          map: "china", // 与引用进来的地图js名字一致
          roam: false, // 缩放平移
          scaleLimit: {
            //地图缩放
            min: 1.5,
            max: 2,
          },
          center: [105, 35],
          itemStyle: {
            // 每个区域的样式
            normal: {
              areaColor: "#176ad6",
              borderColor: "#1449d6",
            },
          },
          regions: [
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: "江西省", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 1, // 透明度
                  borderColor: "#fff", // 省份界线颜色
                  borderWidth: 1, // 省份界线的宽度
                  areaColor: "#FC3D00", // 整个省份的颜色
                },
              },
            },
            {
              // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: "湖南省", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
              itemStyle: {
                normal: {
                  opacity: 1, // 透明度
                  borderColor: "#fff", // 省份界线颜色
                  borderWidth: 1, // 省份界线的宽度
                  areaColor: "#FC3D00", // 整个省份的颜色
                },
              },
            },
          ],
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "#FF7D61",
            },
          },
        },
        series: series,
      };
      myChart.setOption(optionMap, true);
      myChart.on("click", function (params) {
        if (params.name == "江西省" || params.name == "江西") {
          that.showA = 1;
          that.$nextTick(() => {
            that.getJiangxi();
          });
        }
      });
      myChart.on("click", function (params) {
        if (params.name == "湖南省" || params.name == "湖南") {
          // that.showHU = true;
          // that.getList2();
          that.showA = 2;
          that.$nextTick(() => {
            that.getHunan();
          });
        }
      });
      // myChart.on("click", function (params) {
      //   if (params.name == "河北省" || params.name == "河北") {
      //     that.showA = 2;
      //     that.$nextTick(() => {
      //       that.getHebei();
      //     });
      //   }
      // });

      //   图表自适应
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 1000);
    },
    toUrl() {
      this.rock = 1;
      setTimeout(() => {
        window.location.href = "../rocket.html";
      }, 100);
    },
    getList2() {
      getList({ posid: 7 }).then((res) => {
        this.hunanList = res.data;
        this.$nextTick(() => {
          this.swiperMain();
        });
      });
    },
    // 跳转江西
    getJiangxi() {
      var that = this;
      let myChart = that.$echarts.init(document.getElementById("map2"));
      that.$echarts.registerMap("江西", jiangxi);
      var d = [];
      for (var i = 0; i < jiangxi.features.length; i++) {
        d.push({ name: jiangxi.features[i].properties.name });
      }
      d[7].value = 1000;
      d[0].value = 2000;
      d[12].value = 3000;
      d[12].name = "进贤";
      d[13].value = 100;
      d[14].value = 200;
      d[18].value = 300;
      d[57].value = 400;
      d[59].value = 500;
      d[90].value = 600;
      // d[21].value = 700;
      d[55].value = 701;
      d[44].value = 702;
      d[41].value = 703;
      d[77].value = 704;
      d[19].value = 709;
      d[87].value = 710;
      d[16].value = 711;
      d[65].value = 712;
      d[81].value = 713;
      d[88].value = 714;
      d[86].value = 715;
      d[39].value = 716;
      // d[50].value = 717;
      // d[48].value = 718;
      d[70].value = 719;
      d[66].value = 720;
      d[68].value = 721;
      d[93].value = 722; //吉州区
      d[94].value = 723; //青原区
      d[95].value = 724; //吉安县
      d[25].value = 725; //瑞昌市
      d[15].value = 726; //濂溪区
      d[17].value = 727; //濂溪区
      d[73].value = 728; //宜丰
      d[56].value = 729; //广昌
      d[96].value = 730; //吉水县
      d[101].value = 731; //遂川县
      d[102].value = 732; //万安县
      d[100].value = 733; //泰和县
      d[105].value = 734; //井冈山市
      d[104].value = 735; //永新县
      d[99].value = 736; //永丰县
      d[69].value = 737; //袁州区
      d[71].value = 738; //万载县
      d[21].value = 739; //德安县
      d[26].value = 740; //共青城市
      d[63].value = 741; //弋阳县
      d[24].value = 742; //彭泽县
      // d[99].value = 737; //井开区
      this.renderMap("江西", d);
    },
    renderMap(map, data) {
      var that = this;
      // 散点在地图上的坐标
      var geoCoordMap = {
        南昌市: [115.892151, 28.676493],
      };
      // 将坐标与值对应并反映在地图上
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      let myChart = that.$echarts.init(document.getElementById("map2"));
      var option = {
        // backgroundColor: '#000',
        dataRange: {
          x: "-1000 px", //图例横轴位置
          y: "-1000 px", //图例纵轴位置
          splitList: [
            {
              name: "吉州区",
              label: "吉州区",
              value: 1000,
              color: "#F2833A",
            },
            {
              name: "南昌市",
              label: "南昌市",
              value: 2000,
              color: "#FC3D00",
            },
            {
              name: "进贤",
              label: "进贤",
              value: 3000,
              color: "#F2833A",
            },
            {
              name: "安义县",
              label: "安义县",
              value: 100,
              color: "#FC3D00",
            },
            {
              name: "金溪县",
              label: "金溪县",
              value: 200,
              color: "#F2833A",
            },
            {
              name: "武宁县",
              label: "武宁县",
              value: 300,
              color: "#F2833A",
            },
            {
              name: "信州区",
              label: "信州区",
              value: 400,
              color: "#F2833A",
            },
            {
              name: "广信区",
              label: "广信区",
              value: 500,
              color: "#F2833A",
            },
            {
              name: "月湖区",
              label: "月湖区",
              value: 600,
              color: "#F2833A",
            },
            // {
            //   name: "德安县",
            //   label: "德安县",
            //   value: 700,
            //   color: "#F2833A",
            // },
            {
              name: "资溪县",
              label: "资溪县",
              value: 701,
              color: "#F2833A",
            },
            {
              name: "瑞金市",
              label: "瑞金市",
              value: 702,
              color: "#F2833A",
            },
            // {
            //   name: "会昌县",
            //   label: "会昌县",
            //   value: 703,
            //   color: "#F2833A",
            // },
            {
              name: "樟树市",
              label: "樟树市",
              value: 704,
              color: "#F2833A",
            },
            {
              name: "吉州区",
              label: "吉州区",
              value: 705,
              color: "#F2833A",
            },
            {
              name: "青原区",
              label: "青原区",
              value: 706,
              color: "#F2833A",
            },
            {
              name: "吉安县",
              label: "吉安县",
              value: 707,
              color: "#F2833A",
            },
            {
              name: "吉水县",
              label: "吉水县",
              value: 708,
              color: "#F2833A",
            },
            {
              name: "修水县",
              label: "修水县",
              value: 709,
              color: "#F2833A",
            },
            {
              name: "珠山区",
              label: "珠山区",
              value: 710,
              color: "#F2833A",
            },
            {
              name: "浔阳区",
              label: "浔阳区",
              value: 711,
              color: "#F2833A",
            },
            {
              name: "鄱阳县",
              label: "鄱阳县",
              value: 712,
              color: "#F2833A",
            },
            {
              name: "莲花县",
              label: "莲花县",
              value: 713,
              color: "#F2833A",
            },
            {
              name: "浮梁县",
              label: "浮梁县",
              value: 714,
              color: "#F2833A",
            },
            {
              name: "昌江区",
              label: "昌江区",
              value: 715,
              color: "#F2833A",
            },
            {
              name: "于都县",
              label: "于都县",
              value: 716,
              color: "#F2833A",
            },
            // {
            //   name: "南丰县",
            //   label: "南丰县",
            //   value: 717,
            //   color: "#F2833A",
            // },
            // {
            //   name: "南城县",
            //   label: "南城县",
            //   value: 718,
            //   color: "#F2833A",
            // },
            {
              name: "奉新县",
              label: "奉新县",
              value: 719,
              color: "#F2833A",
            },
            {
              name: "万年县",
              label: "万年县",
              value: 720,
              color: "#F2833A",
            },
            {
              name: "德兴市",
              label: "德兴市",
              value: 721,
              color: "#F2833A",
            },
            {
              name: "瑞昌市",
              label: "瑞昌市",
              value: 725,
              color: "#F2833A",
            },
            {
              name: "濂溪区",
              label: "濂溪区",
              value: 726,
              color: "#F2833A",
            },
            {
              name: "柴桑区",
              label: "柴桑区",
              value: 727,
              color: "#F2833A",
            },
            {
              name: "宜丰县",
              label: "宜丰县",
              value: 728,
              color: "#F2833A",
            },
            {
              name: "广昌县",
              label: "广昌县",
              value: 729,
              color: "#F2833A",
            },
            {
              name: "彭泽县",
              label: "彭泽县",
              value: 742,
              color: "#F2833A",
            },
          ],
        },
        geo: {
          map: "江西",
          show: false,
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "",
              borderColor: "#1449d6",
            },
            emphasis: {
              areaColor: "#2a333d",
            },
          },
        },
        animationDuration: 1000,
        animationEasing: "cubicOut",
        animationDurationUpdate: 1000,
      };
      option.series = [
        {
          name: map,
          zoom: 1,
          type: "map",
          mapType: map,
          roam: false,
          nameMap: { china: "江西" },
          mapLocation: {
            x: "10",
            y: "10",
            // width:'90%',
            height: "90%",
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
            emphasis: {
              show: true,
              textStyle: { color: "#fff", fontSize: 10 },
            },
          },
          itemStyle: {
            // 每个区域的样式
            normal: {
              areaColor: "#176ad6",
              borderColor: "#1449d6",
              // borderWidth: 1,
            },
          },
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "#FF7D61",
            },
          },
          data: data,
          rippleEffect: {
            period: 2.5, //波纹秒数
            brushType: "fill", //stroke(涟漪)和fill(扩散)，两种效果
            scale: 5, //波纹范围
            color: "#FFEE00", // 特效颜色
          },
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          data: convertData([{ name: "南昌市", value: 1000 }]),
          label: {
            normal: { show: true, textStyle: { color: "#fff", fontSize: 16 } },
            emphasis: {
              show: true,
              textStyle: { color: "#fff", fontSize: 16 },
            },
          },
          symbolSize: 12,
          rippleEffect: {
            period: 2.5, //波纹秒数
            brushType: "fill", //stroke(涟漪)和fill(扩散)，两种效果
            scale: 5, //波纹范围
            color: "#FFEE00", // 特效颜色
          },
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "",
              borderColor: "#1449d6",
              // borderWidth: 1,
            },
            emphasis: {
              borderColor: "#fff",
              borderWidth: 1,
              color: "#ffffff", // 标志颜色
            },
          },
        },
      ];
      myChart.setOption(option);
      myChart.on("click", function (params) {
          //console.log(params.data.value)
        if (params.data.value == 3000) {
          that.toShowInfo(15);
        } else if (params.data.value == 1000) {
          that.toShowInfo(16);
        } else if (params.data.value == 200) {
          that.toShowInfo(1);
        } else if (params.data.value == 100) {
          that.toShowInfo(2);
        } else if (params.data.value == 300) {
          that.toShowInfo(3);
        } else if (params.data.value == 400) {
          that.toShowInfo(4);
        } else if (params.data.value == 500) {
          that.toShowInfo(5);
        } else if (params.data.value == 600) {
          that.toShowInfo(6);
        } else if (params.data.value == 700) {
          that.toShowInfo(7);
        } else if (params.data.value == 701) {
          that.toShowInfo(8);
        } else if (params.data.value == 702) {
          that.toShowInfo(9);
        } else if (params.data.value == 703) {
          that.toShowInfo(10);
        } else if (params.data.value == 704) {
          that.toShowInfo(11);
        } else if (params.data.value == 708) {
          that.toShowInfo(12);
        } else if (params.data.value == 707) {
          that.toShowInfo(13);
        } else if (params.data.value == 706) {
          that.toShowInfo(14);
        } else if (params.data.value == 709) {
          that.toShowInfo(17);
        } else if (params.data.value == 709) {
          that.toShowInfo(18);
        } else if (params.data.value == 712) {
          that.toShowInfo(20);
        } else if (params.data.value == 713) {
          that.toShowInfo(21);
        } else if (params.data.value == 714) {
          that.toShowInfo(22);
        } else if (params.data.value == 716) {
          that.toShowInfo(23);
        } else if (params.data.value == 719) {
          that.toShowInfo(26);
        } else if (params.data.value == 720) {
          that.toShowInfo(27);
        } else if (params.data.value == 721) {
          that.toShowInfo(28);
        } else if (params.data.value == 722) {
          that.toShowInfo(16);
        } else if (params.data.value == 723) {
          that.toShowInfo(29);
        } else if (
          params.data.value == 724 ||
          params.data.value == 730 ||
          params.data.value == 731 ||
          params.data.value == 732 ||
          params.data.value == 733 ||
          params.data.value == 734 ||
          params.data.value == 735 ||
           params.data.value == 736
        ) {
          that.toShowInfo(16);
        } else if (params.data.value == 725) {
          that.toShowInfo(31);
        } else if (params.data.value == 726) {
          that.toShowInfo(32);
        } else if (params.data.value == 727) {
          that.toShowInfo(33);
        } else if (params.data.value == 728) {
          that.toShowInfo(34);
        } else if (params.data.value == 737) {
          that.toShowInfo(45);
        } else if (params.data.value == 738) {
          that.toShowInfo(46);
        } else if (params.data.value == 739) {
          that.toShowInfo(47);
        } else if (params.data.value == 740) {
          that.toShowInfo(48);
        } else if (params.data.value == 741) {
          that.toShowInfo(49);
        } else if (params.data.value == 742) {
          that.toShowInfo(50);
        }
      });
      // //用于使chart自适应高度和宽度
      window.onresize = function () {
        //重置容器高宽
        myChart.resize();
      };
    },
    renderMap2(map, data) {
      var that = this;
      // 散点在地图上的坐标
      // var geoCoordMap = {
      //   长沙市: [114.502461, 38.045474],
      // };
      // // 将坐标与值对应并反映在地图上
      // var convertData = function (data) {
      //   var res = [];
      //   for (var i = 0; i < data.length; i++) {
      //     var geoCoord = geoCoordMap[data[i].name];
      //     if (geoCoord) {
      //       res.push({
      //         name: data[i].name,
      //         value: geoCoord.concat(data[i].value),
      //       });
      //     }
      //   }
      //   return res;
      // };
      let myChart = that.$echarts.init(document.getElementById("map2"));
      var option = {
        // backgroundColor: '#000',
        dataRange: {
          x: "-1000 px", //图例横轴位置
          y: "-1000 px", //图例纵轴位置
          splitList: [
         
          ],
        },
        // geo: {
        //   map: "湖南",
        //   label: {
        //     emphasis: {
        //       show: false,
        //     },
        //   },
        //   itemStyle: {
        //     normal: {
        //       areaColor: "",
        //       borderColor: "#1449d6",
        //     },
        //     emphasis: {
        //       areaColor: "#2a333d",
        //     },
        //   },
        // },
        animationDuration: 1000,
        animationEasing: "cubicOut",
        animationDurationUpdate: 1000,
      };
      option.series = [
        {
          name: map,
          zoom: 1,
          type: "map",
          mapType: map,
          roam: false,
          nameMap: { china: "湖南" },
          mapLocation: {
            x: "10",
            y: "10",
            // width:'90%',
            height: "90%",
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
            emphasis: {
              show: true,
              textStyle: { color: "#fff", fontSize: 10 },
            },
          },
          itemStyle: {
            // 每个区域的样式
            normal: {
              areaColor: "#176ad6",
              borderColor: "#1449d6",
              // borderWidth: 1,
            },
          },
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "#FF7D61",
            },
          },
          data: data,
        },
      ];
      myChart.setOption(option);
      myChart.on("click", function (params) {
        //console.log(params)
        that.showHU = true;
          that.getList2();
      })
      // //用于使chart自适应高度和宽度
      window.onresize = function () {
        //重置容器高宽
        myChart.resize();
      };
    },
    // 跳转湖南
    getHunan() {
      var that = this;
      let myChart = that.$echarts.init(document.getElementById("map2"));
      that.$echarts.registerMap("湖南", hunan);
      var d = [];
      for (var i = 0; i < hunan.features.length; i++) {
        d.push({ name: hunan.features[i].properties.name });
      }
      //console.log(d);
      d[1].value = 1000;
      this.renderMap2("湖南", d);
    },
    toReturn() {
      this.showA = 0;
      this.$nextTick(() => {
        this.getmyChart();
      });
    },
    // 展示联系信息
    toShowInfo(id) {
      if (id != 35) {
        this.showId = id;
        let info = {};
        this.list.forEach((item) => {
          if (item.id == id) {
            info = item;
          }
        });
        this.people = info.people;
        this.phone = info.phone;
        this.com = info.company;
        this.img = info.img;
        this.addr = info.addr;
        this.company = info.company;
        this.jinxain = false;
        this.jian = false;
        if (
          id == 16 ||
          id == 3 ||
          id == 2 ||
          id == 7 ||
          id == 11 ||
          id == 45 ||
          id == 46 ||
          id == 12 ||
          id == 13 ||
          id == 17 ||
          id == 14 ||
          id == 19 ||
          id == 21 ||
          id == 29 ||
          id == 31 ||
          id == 32 ||
          id == 33 ||
          id == 34 ||
          id == 36 ||
          id == 37 ||
          id == 38 ||
          id == 39 ||
          id == 40 ||
          id == 41 ||
          id == 42 ||
          id == 43 ||
          id == 44 ||
          id == 47 ||
          id == 48 ||
          id == 50
        ) {
          setTimeout(() => {
            //console.log(888);
            this.showVideo(1);
          }, 50);
        } else {
          setTimeout(() => {
            this.showVideo(2);
          }, 50);
        }
      }

      // this.del();
      // this.del2();
    },
    showVideo(n) {
      let that = this;

      // that.showId = "";
      if (n == 2) {
        //console.log(555);
        //进贤
        that.jinxain = true;
        that.jian = false;
        if (that.img.length != 0) {
          that.swiperMain();
        }
        var elevideo = document.getElementById("jinxian");
        if (elevideo) {
          setTimeout(() => {
            var elevideo = document.getElementById("jinxian");
            elevideo.addEventListener(
              "ended",
              function () {
                //结束
                that.videoQuan = false;
              },
              false
            );
            elevideo.onclick = function () {
              if (elevideo.paused) {
                elevideo.play();
              } else {
                elevideo.pause();
              }
            };
          }, 5000);
        }
      } else if (n == 1) {
        //吉安
        that.jian = true;
        that.jinxain = false;
        var elevideo = document.getElementById("jian");
        if (elevideo) {
          setTimeout(() => {
            elevideo.addEventListener(
              "ended",
              function () {
                //结束
                that.videoQuan2 = false;
              },
              false
            );
            elevideo.onclick = function () {
              if (elevideo.paused) {
                elevideo.play();
              } else {
                elevideo.pause();
              }
            };
          }, 5000);
        }
      }
      if (that.img.length != 0) {
        this.$nextTick(() => {
          this.swiperMain();
        });
      }
    },
  },

  created() {
    this.$nextTick(() => {
      this.getmyChart();
    });
  },
  mounted() {
    getPath({ posid: 3 }).then((res) => {
      this.videoBg = res.data.path;
    });

    getList({ posid: 4 }).then((res) => {
      this.pathList = res.data;
      let list = this.list;
      list.forEach((item) => {
        if (
          item.name == "吉安县" ||
          item.name == "青原区" ||
          item.name == "吉州区" ||
          item.name == "吉水县" ||
          item.name == "遂川县" ||
          item.name == "万安县" ||
          item.name == "泰和县" ||
          item.name == "井冈山市" ||
          item.name == "永新县" ||
          item.name == "永丰县" ||
          item.name == "井开区" ||
          item.name == "庐陵新区"
        ) {
          item.img = [res.data[0].path];
        }
        if (item.name == "进贤县") {
          item.img = [res.data[1].path];
        }
        if (item.name == "信州区" || item.name == "广信区") {
          item.img = [res.data[2].path];
        }
        if (item.name == "修水县") {
          item.img = [res.data[3].path];
        }
        if (item.name == "鄱阳县") {
          item.img = [res.data[4].path];
        }
        if (item.name == "万年县") {
          item.img = [res.data[5].path];
        }
        if (item.name == "奉新县") {
          item.img = [res.data[6].path];
        }
        if (item.name == "宜丰县") {
          item.img = [res.data[8].path];
        }
        if (item.name == "濂溪区") {
          item.img = [res.data[9].path];
        }
        if (item.name == "柴桑区" || item.name == "浔阳区") {
          item.img = [res.data[10].path];
        }
        // if (item.name == "奉新县") {
        //   item.img = res.data[7].path;
        // }
      });
      //console.log(this.list);

      // this.list[3].img = [res.data[2].path];
      // this.list[4].img = [res.data[2].path];
      // this.list[11].img = [res.data[1].path];
      // this.list[12].img = [res.data[0].path];
      // this.list[23].img = [res.data[0].path];
      // this.list[24].img = [res.data[0].path];
      // this.list[13].img = [res.data[3].path];
      // this.list[16].img = [res.data[4].path];
      // this.list[21].img = [res.data[5].path];
      // this.list[20].img = [res.data[6].path];
      // this.list[20].img = [res.data[6].path];
      // this.list[24].img = [res.data[7].path];
    });
  },
};
</script>
<style lang='less' scoped>
.rocketBg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: fill;
}
.map {
  width: 100%;
  height: 1080px;
}
.icon {
  right: 1vw !important;
  top: 10vw !important;
}
.rocket {
  position: absolute;
  bottom: 6vw;
  right: 16vw;
  width: 7.5vw;
  height: 11vw;
  img {
    width: 9vw;
  }
}
.map-box {
  position: absolute;
  top: 1vw;
  // transform: translateY(-50%);
  // left: 1%;
  width: 100%;

  z-index: -1;
  overflow: hidden;
  //   background: #000;
  .map {
    position: relative;
    .map-bgk {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
    }
    .map-self {
      position: absolute;
      top: 0;
      z-index: 3;
      height: 44vw;
      width: 100%;
      .earth {
        position: absolute;
        width: 46vw;
        height: 40vw;
        right: 25%;
        top: 5%;
      }
      .title {
        padding: 1vw;
        font-size: 2vw;
        /* text-align: center; */
        font-weight: bold;
        line-height: 1.5;
        color: white;
        letter-spacing: 2px;
        .tit-a {
          color: #00cbff;
          display: flex;
          align-items: center;
          span {
            width: 1vw;
            height: 1vw;
            border-radius: 3vw;
            background: #00cbff;
            margin-right: 1vw;
          }
        }
        .tit-b {
          font-size: 1.5vw;
          padding-left: 2vw;
          margin-top: 1vw;
          line-height: 1.5;
        }
      }
      #map {
        width: 100%;
        height: 45vw;
        bottom: 4vw;
      }
    }
  }

  //   logo
  .Introduction {
    position: absolute;
    padding: 1vw;
    top: 19vw;
    left: 10vw;
    z-index: 11;
    width: 40vw;
    // height: 30vw;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1vw;
    .logo {
      width: 10vw;
      height: 8vw;
      display: inline-block;
      line-height: 0;
    }
    .text {
      font-size: 1vw;
      color: #fea138;
      line-height: 2;
      font-weight: 550;
    }
  }
  .icon {
    position: absolute;
    top: 39vw;
    right: 29.5vw;
    width: 2vw;
    height: 2vw;
    z-index: 11;
  }
}
.icon-name {
  cursor: pointer;
  position: relative;
  z-index: 200;
}

.map2 {
  position: relative;
  width: 100%;
  text-align: center;
  // height: 80vw;
  .city {
    position: absolute;
    color: #f3e8d6;
    font-size: 16px;
    bottom: 12vw;
    left: 39vw;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
  }
  .city2 {
    bottom: 27.6vw;
    left: 51.8vw;
  }
  .city3 {
    left: 34vw;
    bottom: 29vw;
  }
  .city4 {
    bottom: 33.5vw;
    left: 40vw;
  }
  .city5 {
    bottom: 36vw;
    left: 43vw;
    width: 1vw;
  }
  .city6 {
    bottom: 44vw;
    left: 44vw;
  }
  .city7 {
    bottom: 40vw;
    left: 59vw;
  }
  .city8 {
    bottom: 44vw;
    left: 55.5vw;
    width: 1vw;
  }
  .city9 {
    bottom: 35.2vw;
    left: 54vw;
    font-size: 14px;
  }
  .city10 {
    top: 31.5vw;
    left: 38vw;
    font-size: 18px;
    z-index: 1;
  }
  .city11 {
    bottom: 56.5vw;
    left: 34vw;
    font-size: 18px;
    z-index: 1;
  }
  .city12 {
    bottom: 45.5vw;
    left: 58vw;
    font-size: 18px;
    z-index: 1;
  }
  .city13 {
    bottom: 48.5vw;
    left: 68vw;
    font-size: 18px;
    z-index: 1;
  }
  .city14 {
    bottom: 39.5vw;
    left: 39vw;
    font-size: 18px;
    z-index: 1;
  }
  .city15 {
    bottom: 40.5vw;
    left: 46vw;
    font-size: 16px;
    z-index: 1;
  }
  .city16 {
    bottom: 29.5vw;
    left: 50vw;
    font-size: 18px;
    z-index: 1;
  }
  .city17 {
    bottom: 19.5vw;
    left: 41vw;
    font-size: 18px;
    z-index: 1;
  }
  .city18 {
    bottom: 14.5vw;
    left: 29vw;
    font-size: 18px;
    z-index: 1;
  }
  .city19 {
    bottom: 6.5vw;
    left: 33vw;
    font-size: 18px;
    z-index: 1;
  }
  .city20 {
    top: 44.5vw;
    left: 33vw;
    font-size: 18px;
    z-index: 1;
  }
  .icon-name {
    position: absolute;
    top: 21.8vw;
    color: #ffee00;
    display: flex;
    align-items: center;
    left: 53.2vw;
    font-size: 0.7vw;
    background: #f2833a;
    img {
      width: 0.9vw;
      margin: 0 auto;
    }
  }
  .icon-name2 {
    top: 28.8vw;
    left: 41vw;
    font-size: 0.5vw;
    /* letter-spacing: 8px; */
    font-weight: bold;
    // padding: 0.5vw;
    img {
      width: 0.7vw;
      margin-right: 0px;
    }
  }
  .icon-name3 {
    background: none;
    font-size: 1.2vw;
    display: block;
    /* text-align: center; */
    /* display: flex; */
    /* flex-wrap: wrap; */
    top: 13.5vw;
    color: white;
    left: 46.7vw;
    letter-spacing: 5px;
    font-weight: bold;
    img {
      width: 2.5vw;
      margin: 0 auto;
      margin-bottom: 6px;
    }
  }

  .icon-name4 {
    top: 17vw;
    left: 50.6vw;
    display: block;
  }
  .icon-name5 {
    top: 19vw;
    left: 44.5vw;
    display: block;
    background: #fc3d00;
    color: white;
    display: none;
    img {
      display: none;
    }
  }
  .icon-name6 {
    top: 9.5vw;
    left: 41.5vw;
    display: block;
  }
  .icon-name7 {
    top: 15.4vw;
    left: 62.4vw;
    display: block;
    font-size: 0.6vw;
    border-radius: 25%;
    background: none;
  }
  .icon-name7 div {
    background: #f2833a;
  }
  .icon-name8 {
    top: 17vw;
    left: 61.5vw;
    display: block;
    font-size: 0.5vw;
    border-radius: 25%;
    background: none;
  }
  .icon-name8 div,
  .icon-name9 div {
    background: #f2833a;
  }
  .icon-name9 {
    top: 19vw;
    left: 54.6vw;
    display: block;
    font-size: 0.6vw;
    border-radius: 25%;
    background: none;
    display: flex;
  }
  .icon-name9 img {
    width: 0.9vw;
  }
  .icon-name10 {
    top: 52vw;
    left: 29.5vw;
    display: block;
    z-index: 1;
    font-size: 1.3vw;
    font-weight: bold;
  }
  .icon-name11 {
    top: 12vw;
    left: 43vw;
  }
  .icon-name12 {
    top: 23.8vw;
    left: 54.5vw;
  }
  .icon-name13 {
    top: 39.8vw;
    left: 47.8vw;
  }
  .icon-name14 {
    top: 62vw;
    left: 44.5vw;
  }
  .icon-name15 {
    top: 21vw;
    left: 43.6vw;
  }
  .icon-name50 {
    left: 37vw;
    top: 19vw;
    div {
      font-size: 0.7vw;
    }
  }
  .icon-name49 {
    left: 36.7vw;
    top: 22.8vw;
    display: flex;
    div {
      font-size: 0.6vw;
    }
    img {
      width: 0.8vw;
    }
  }
  .icon-name16 {
    top: 39.5vw;
    left: 40.3vw;
    display: block;
  }
  .icon-name17 {
    top: 41.5vw;
    left: 35vw;
    display: block;
  }
  .icon-name18 {
    top: 39.8vw;
    left: 37.5vw;
    display: block;
  }
  .icon-name19 {
    top: 43.3vw;
    left: 40.3vw;
    display: block;
  }
  .icon-name21 {
    top: 11vw;
    left: 38vw;
  }
  .icon-name22 {
    top: 9.5vw;
    left: 56.5vw;
    div {
      background: none;
      font-size: 0.5vw;
    }
    img {
      width: 0.7vw;
    }
  }
  .icon-name23 {
    top: 5.5vw;
    left: 48.5vw;
    font-size: 0.4vw;
    div {
      background: none;
    }
    img {
      width: 0.5vw;
    }
  }
  .icon-name24 {
    top: 9.8vw;
    left: 52.6vw;
  }
  .icon-name25 {
    top: 28vw;
    left: 34vw;
  }
  .icon-name26 {
    top: 7vw;
    left: 56.7vw;
    background: #ff7d61;
  }
  .icon-name27 {
    top: 39.5vw;
    left: 44.5vw;
  }
  .icon-name28 {
    top: 41.8vw;
    left: 51vw;
  }
  .icon-name29 {
    top: 36vw;
    left: 53vw;
  }
  .icon-name30 {
    left: 41.8vw;
    top: 14.5vw;
  }
  .icon-name31 {
    left: 54.5vw;
    top: 14.7vw;
  }
  .icon-name32 {
    top: 12.5vw;
    left: 59.5vw;
  }
  .icon-name53 {
    top: 16.3vw;
    left: 58.3vw;
    font-size: 0.5vw;
    background: none;
    div {
      background: #f2833a;
    }
  }
  .icon-name33 {
    top: 27.5vw;
    left: 40.1vw;
    font-size: 0.5vw;
    /* display: flex
; */
    background: none;
    div {
      background: #f2833a;
    }
  }
  .icon-name33 img,
  .icon-name34 img {
    width: 0.7vw;
  }
  .icon-name34 {
    top: 31vw;
    left: 42.6vw;
    display: flex;
    font-size: 0.6vw;
  }
  .icon-name40 {
    top: 28.2vw;
    left: 43vw;
  }
  .icon-name41 {
    left: 36.6vw;
    top: 36.1vw;
  }
  .icon-name42 {
    left: 40.3vw;
    top: 35.2vw;
  }
  .icon-name43 {
    left: 40.5vw;
    top: 32.8vw;
  }
  .icon-name44 {
    left: 35.5vw;
    top: 33.5vw;
  }
  .icon-name45 {
    left: 35.5vw;
    top: 30.3vw;
  }
  .icon-name46 {
    left: 45.5vw;
    top: 29.5vw;
  }
  .icon-name47 {
    left: 38.5vw;
    top: 30.5vw;
  }
  .icon-name48 {
    left: 41.5vw;
    top: 27vw;
  }
  .icon-name35 {
    top: 6.5vw;
    left: 43.7vw;
    display: flex;
    font-size: 12px;
  }
  .icon-name54 {
    top: 4.6vw;
    left: 52.1vw;
    font-size: 0.6vw;
    background: none;
    img {
      width: 0.6vw;
    }
    div {
      background: #f2833a;
    }
  }
  .icon-name51 {
    top: 8.3vw;
    left: 45.3vw;
    display: flex;
    font-size: 10px;
    img {
      width: 0.8vw;
    }
  }
  .icon-name52 {
    top: 9.8vw;
    left: 47vw;
    display: flex;
    font-size: 0.4vw;
    img {
      width: 0.5vw;
    }
  }
  .icon-name36 {
    top: 5.9vw;
    left: 49vw;
    /* display: flex; */
    font-size: 12px;
    background: none;
    scale: 0.7;
    img {
      width: 0.9vw;
    }
  }
  .icon-name37 {
    scale: 0.8;
    top: 6.4vw;
    left: 47vw;
    /* display: flex; */
    font-size: 12px;
    img {
      width: 0.9vw;
    }
  }
  .icon-name38 {
    top: 16.5vw;
    left: 40.2vw;
    font-size: 0.7vw;
    img {
      width: 1vw;
    }
  }
  .icon-name39 {
    top: 31.6vw;
    left: 50.8vw;
    font-size: 0.6vw;
    img {
      width: 0.9vw;
    }
  }
  .icon-name-bg {
    background: #ff7d61;
  }
  .jinxianShow {
    position: absolute;
    top: 33vw;
    right: 6vw;
    width: 326px;
    height: 200px;
    border: solid 12px rgba(248, 131, 54, 0.64);
    z-index: 5;
    img {
      width: 326px;
    }
    video {
      width: 100%;
      height: 100%;
      // object-fit: revert;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
    }
    .quan {
      position: absolute;
      z-index: 10;
      bottom: 0;
      right: 0;
      img {
        width: 3vw;
      }
    }
    .del {
      position: absolute;
      z-index: 6;
      top: -3vw;
      right: -2vw;
      img {
        width: 3vw;
      }
    }
  }
  .jinxianShow2 {
    position: absolute;
    top: 29vw;
    left: 2vw;
    width: 326px;
    height: 200px;
    border: solid 12px rgba(248, 131, 54, 0.64);
    z-index: 50;
    video {
      width: 100%;
      height: 100%;
      // object-fit: fill;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
    }
    .quan2 {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
      img {
        width: 3vw;
      }
    }
    .del2 {
      position: absolute;
      z-index: 6;
      top: -3vw;
      right: -2vw;
      img {
        width: 3vw;
      }
    }
  }
  .jinxianShow3 {
       top: 18vw;
    right: 4vw;
    width: 26vw;
    height: 18vw;
  }
  .imgNone {
    height: 5vw !important;
    border: none;
  }
  .sId1 {
    width: 20vw;
    right: 13vw;
    height: 179px;
    top: 33vw;
    .border {
      top: -210px;
      left: -247px;
      img {
        width: 36vw;
      }
    }
  }
  .sId2 {
    top: 20vw;
    left: 15vw;
    .border {
      top: -5vw;
      left: -3vw;
      img {
        width: 35vw;
      }
    }
    .zhan-infos {
      bottom: -125px;
    }
  }
  .sId3 {
    top: 26vw;
    left: 8vw;
    .border {
      top: -15vw;
      left: -3.5vw;
      img {
        width: 38vw;
      }
    }
  }
  .sId31 {
    top: 22vw;
    left: 11vw;
    .border {
      top: -15vw;
      left: -3.5vw;
      img {
        width: 38vw;
      }
    }
  }
  .sId50 {
    top: 20vw;
    left: 13vw;
    .zhan-infos {
      bottom: -8vw;
    }
    .border {
      top: -15vw;
      left: -3.5vw;
      img {
        width: 44vw;
      }
    }
  }
  .sId47 {
    top: 28vw;
    left: 9vw;
    .border {
      top: -15vw;
      left: -3.5vw;
      img {
        width: 38vw;
      }
    }
  }
  .sId48 {
    top: 30vw;
    left: 12vw;
    .border {
      top: -15vw;
      left: -3.5vw;
      img {
        width: 38vw;
      }
    }
  }
  .sId7 {
    top: 25vw;
    left: 5vw;
    .border {
      top: -12.5vw;
      left: -3.5vw;
      img {
        width: 43vw;
      }
    }
    .zhan-infos {
      bottom: -125px;
    }
  }
  .sId19 {
    top: 18vw;
    left: 9vw;
    .border {
      top: -12.5vw;
      left: -3.5vw;
      img {
        width: 43vw;
      }
    }
    .zhan-infos {
      bottom: -49px;
    }
  }
  .sId32 {
    top: 18vw;
    left: 10vw;
    .border {
      top: -12.5vw;
      left: -3.5vw;
      img {
        width: 43vw;
      }
    }
    .zhan-infos {
      bottom: -53px;
    }
  }
  .sId33 {
    top: 21vw;
    left: 8vw;
    .border {
      top: -13.5vw;
      left: -3.5vw;
      img {
        width: 43vw;
      }
    }
    .zhan-infos {
      bottom: -49px;
    }
  }
  .sId4 {
    width: 263px;
    top: 29vw;
    right: 11vw;
    .zhan-infos {
      width: 101%;
      // bottom: -139px;
    }
    .border {
      top: -13.5vw;
      left: -12.5vw;
      img {
        width: 33vw;
      }
    }
  }
  .sId5 {
    width: 263px;
    top: 31vw;
    right: 1vw;
    .zhan-infos {
      width: 101%;
      // bottom: -139px;
    }
    .border {
      top: -5.8vw;
      left: -11.5vw;
      img {
        width: 33vw;
      }
    }
  }
  .sId6 {
    width: 263px;
    top: 34vw;
    right: 18vw;
    .zhan-infos {
      width: 101%;
    }
    .border {
      top: -15vw;
      left: -12vw;
      img {
        width: 33vw;
      }
    }
  }
  .sId8 {
    width: 20vw;
    right: 14vw;
    height: 179px;
    top: 28vw;
    .border {
      top: -69px;
      left: -181px;
      img {
        width: 34vw;
      }
    }
    .zhan-infos {
      bottom: -120px;
    }
  }
  .sId9 {
    width: 21vw;
    right: 19vw;
    height: 179px;
    top: 36vw;
    .zhan-infos {
      left: -51px;
      width: 75%;
    }
    .border {
      top: 94px;
      left: -186px;
      img {
        width: 26vw;
      }
    }
  }
  .sId10 {
    width: 21vw;
    right: 20vw;
    height: 179px;
    top: 51vw;
    .zhan-infos {
      width: 92%;
    }
    .border {
      top: 8vw;
      left: -160px;
      img {
        width: 34vw;
      }
    }
  }
  .sId11 {
        width: 20vw;
    left: 14vw;
    height: 179px;
    top: 24vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
          top: -38px;
    left: -57px;
      img {
        width: 33vw;
      }
    }
  }
  .sId45 {
    width: 20vw;
    left: 8vw;
    height: 179px;
    top: 23vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
      top: 0px;
      left: -42px;
      img {
        width: 32vw;
      }
    }
  }
  .sId46 {
    width: 20vw;
    left: 8vw;
    height: 179px;
    top: 20vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
      top: 0px;
      left: -42px;
      img {
        width: 32vw;
      }
    }
  }
  .sId34 {
    width: 20vw;
    left: 9vw;
    height: 179px;
    top: 15vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
      top: 37px;
      left: -62px;
      img {
        width: 35vw;
      }
    }
  }
  .sId12 {
    width: 20vw;
    left: 11vw;
    height: 179px;
    top: 37vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
      top: 48px;
      left: -42px;
      img {
        width: 32vw;
      }
    }
  }
  .sId13 {
    width: 20vw;
    left: 6vw;
    height: 179px;
    top: 40vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
      top: 48px;
      left: -42px;
      img {
        width: 32vw;
      }
    }
  }
  .sId17 {
    width: 18vw;
    left: 8vw;
    height: 179px;
    top: 21vw;
    .zhan-infos {
      // bottom: -141px;
    }
    .border {
      top: -8vw;
      left: -36px;
      img {
        width: 32vw;
      }
    }
  }

  .sId14 {
    width: 20vw;
    left: 11vw;
    height: 179px;
    top: 39vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
      top: 48px;
      left: -42px;
      img {
        width: 32vw;
      }
    }
  }
  .sId15 {
    top: 23vw;
    right: 19vw;
    .border {
      top: -106px;
      left: -212px;
      img {
        width: 32vw;
      }
    }
  }
  .sId16 {
    left: 7vw;
    height: 179px;
    top: 19vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
      top: 175px;
      left: -65px;
      img {
        width: 36vw;
      }
    }
  }
  .sId29,
  .sId36,
  .sId37,
  .sId38,
  .sId39,
  .sId40,
  .sId41,
  .sId42,
  .sId43,
  .sId44 {
    left: 2vw;
    height: 179px;
    top: 22vw;
    // .zhan-infos {
    //   background: #061d46;
    // }
    .border {
      top: 162px;
      left: -94px;
      img {
        width: 41vw;
      }
    }
  }
  .sId36 {
    top: 20vw;
    left: 8vw;
  }
  .sId39 {
    top: 24vw;
    left: 5vw;
  }
  .sId44 {
    top: 19vw;
    left: 7vw;
  }
  .sId21 {
    width: 20vw;
    left: 7vw;
    top: 26vw;
    .border {
      top: 56px;
      left: -38px;
      img {
        width: 30vw;
      }
    }
    .zhan-infos {
      bottom: -120px;
    }
  }
  .sId18 {
    top: 25vw;
    right: 20vw;
    .zhan-infos {
      bottom: -76px;
      width: 80%;
      left: 75px;
    }
    .border {
      top: -279px;
      left: -95px;
      img {
        width: 28vw;
      }
    }
  }
  .sId27 {
    top: 26vw;
    right: 12vw;
    .zhan-infos {
      // bottom: -76px;
      width: 80%;
      // left: 75px;
    }
    .border {
      top: -222px;
      left: -252px;
      img {
        width: 36vw;
      }
    }
  }
  .sId20 {
    top: 26vw;
    right: 15vw;
    .zhan-infos {
      bottom: -54px;
      width: 100%;
      // left: 75px;
    }
    .border {
      top: -310px;
      left: -227px;
      img {
        width: 35vw;
      }
    }
  }
  .sId22 {
    top: 22vw;
    right: 18vw;
    .zhan-infos {
      bottom: -76px;
      width: 80%;
      left: 75px;
    }
    .border {
      top: -279px;
      left: -95px;
      img {
        width: 36vw;
      }
    }
  }
  .sId23 {
    width: 21vw;
    right: 23vw;
    height: 179px;
    top: 33vw;
    .zhan-infos {
      background: #061d46;
      bottom: -120px;
    }
    .border {
      top: 136px;
      left: -176px;
      img {
        width: 34vw;
      }
    }
  }
  .sId26 {
    top: 19vw;
    left: 8vw;
    .border {
      top: -4.5vw;
      left: -3vw;
      img {
        width: 38vw;
      }
    }
    .zhan-infos {
      bottom: -59px;
      left: -14px;
    }
  }
  .sId28 {
    width: 263px;
    top: 27vw;
    right: 13vw;
    .zhan-infos {
      width: 101%;
    }
    .border {
      top: -14vw;
      left: -11.5vw;
      img {
        width: 33vw;
      }
    }
  }
  .sId28 {
    width: 263px;
    top: 32vw;
    right: 4vw;
    .zhan-infos {
      width: 101%;
    }
    .border {
      top: -14vw;
      left: -11.5vw;
      img {
        width: 33vw;
      }
    }
  }
  .sId49 {
    width: 263px;
    top: 33vw;
    right: 15vw;
    .zhan-infos {
      width: 101%;
    }
    .border {
      top: -14vw;
      left: -11.5vw;
      img {
        width: 33vw;
      }
    }
  }
  .videoQuan,
  .videoQuan2 {
    top: 0;
    /* left: 0; */
    width: 98%;
    height: 95vh;
    left: 0;
    z-index: 500;
  }
  .huQuan {
    top: 3vw;
    /* left: 0; */
    width: 92%;
    height: 88vh;
    left: 3%;
    z-index: 500;
  }
  .border {
    position: absolute;
    // top: 24vw;
    // left: 53vw;
    // img {
    //   width: 42vw;
    // }
  }
  // .border2 {
  //   top: auto;
  //   left: 0;
  //   bottom: 33vw;
  //   img {
  //     width: 36vw;
  //   }
  // }
  .map2 {
    position: relative;
    width: 100%;
    height: 56vw;
  }
  #map2 {
    width: 100%;
    height: 100%;
    position: relative;
    // bottom: 5vw;
  }
  #map3 {
    width: 100%;
    height: 90vw;
    position: relative;
    bottom: 5vw;
  }
  .icon-view {
    position: absolute;
    top: 7vw;
    left: 4vw;
    z-index: 50;
    img {
      height: 8vw;
    }
    p {
      position: absolute;
      top: 50%;
      left: 52%;
      width: 9vw;
      font-size: 2.5vw;
      font-weight: bold;
      color: #fece4c;
      transform: translate(-50%, -50%);
      letter-spacing: 1vw;
      text-align: center;
    }
  }
  .icon-view2 {
    top: auto;
    left: 4vw;
    bottom: 4vw;
    img {
      height: 5vw;
    }
    p {
      font-size: 1.5vw;
      left: 50%;
      letter-spacing: 0;
    }
  }
  .text-view {
    position: absolute;
    bottom: 4vw;
    right: 3vw;
    img {
      width: 25vw;
      margin-bottom: 1vw;
    }
  }
}
#serve-img-area {
  position: absolute;
  top: 0;
}
@-webkit-keyframes ripple {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1, 0.1);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes ripple {
  0% {
    opacity: 0;
    -moz-transform: scale(0.1, 0.1);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -moz-transform: scale(1);
  }
}
@-o-keyframes ripple {
  0% {
    opacity: 0;
    -o-transform: scale(0.1, 0.1);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -o-transform: scale(1);
  }
}

@keyframes ripple {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1, 0.1);

    -moz-transform: scale(0.1, 0.1);

    -ms-transform: scale(0.1, 0.1);

    transform: scale(0.1, 0.1);
  }

  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);

    transform: scale(1);
  }
}
#serve-img-area.paused
  .point-area
  .point-10:after，#serve-img-area.paused
  .point-area
  .point-20:after，
  #serve-img-area.paused
  .point-area
  .point-80:after {
  animation-play-state: paused;

  -webkit-animation-play-state: paused;

  /* Safari 和 Chrome */
}

/* 定义范围*/

#serve-img-area .point-area {
  text-align: center;

  position: relative;

  width: 80px;

  height: 80px;

  -webkit-transition: opacity 0.5s ease-out;

  -moz-transition: opacity 0.5s ease-out;

  -o-transition: opacity 0.5s ease-out;

  transition: opacity 0.5s ease-out;
}

/* 定义圆点*/

#serve-img-area .point-area .point {
  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  width: 10px;

  height: 10px;

  -webkit-border-radius: 50%;

  -webkit-background-clip: padding-box;

  -moz-border-radius: 50%;

  -moz-background-clip: padding;

  border-radius: 50%;

  background-clip: padding-box;

  background: transparent;
}

/* 定义圆扩散的阴影*/

#serve-img-area .point-area .point-shadow:after {
  -webkit-box-shadow: inset 0 0 5em rgba(255, 152, 0, 0.6);

  -moz-box-shadow: inset 0 0 5em rgba(255, 152, 0, 0.6);

  box-shadow: inset 0 0 5em rgba(255, 152, 0, 0.6);
}

#serve-img-area .point-area .point-dot {
  z-index: 1;

  background-color: #ff9800;

  border: 1px solid #ff9900;
}

#serve-img-area .point-area .point-10 {
  width: 100%;

  height: 100%;
}

#serve-img-area .point-area .point-10:after {
  content: "";

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  border-radius: 50%;

  border: 2px solid #ff9800;

  opacity: 0;

  -webkit-animation: ripple 4500ms ease-out 225ms infinite;

  -moz-animation: ripple 4500ms ease-out 225ms infinite;

  -o-animation: ripple 4500ms ease-out 225ms infinite;

  animation: ripple 4500ms ease-out 225ms infinite;
}

#serve-img-area .point-area .point-40 {
  width: 100%;

  height: 100%;
}

#serve-img-area .point-area .point-40:after {
  content: "";

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  border-radius: 50%;

  border: 2px solid #ff9800;

  opacity: 0;

  -webkit-animation: ripple 4500ms ease-out 900ms infinite;

  -moz-animation: ripple 4500ms ease-out 900ms infinite;

  -o-animation: ripple 4500ms ease-out 900ms infinite;

  animation: ripple 4500ms ease-out 900ms infinite;
}

#serve-img-area .point-area .point-80 {
  width: 100%;

  height: 100%;
}

#serve-img-area .point-area .point-80:after {
  content: "";

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  border-radius: 50%;

  border: 2px solid #ff9800;

  opacity: 0;

  -webkit-animation: ripple 4500ms ease-out 1800ms infinite;

  -moz-animation: ripple 4500ms ease-out 1800ms infinite;

  -o-animation: ripple 4500ms ease-out 1800ms infinite;
  animation: ripple 4500ms ease-out 1800ms infinite;
}
.show-info {
  position: absolute;
  background: white !important;
  color: #176ad6;
  z-index: 2;
  text-align: left;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 17px 1px #176ad6;
  top: 34px;
  line-height: 2;
  left: 0;
  width: 10vw;
  div {
    background: none !important;
  }
  .show-info-tit {
    font-weight: bold;
    font-size: 1.1vw;
  }
}
.zhan-infos {
  position: absolute;
  bottom: -63px;
  z-index: 2;
  text-align: left;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.11);
  width: 98%;
  left: -10px;
  color: #fe894c;
  padding: 0.5vw 1vw;
  line-height: 2;
  font-weight: bold;
}
.spanC {
  color: #fece4c;
}
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
  .content-item {
    position: absolute;
    width: 130%;
    display: flex;
    justify-content: space-between;
    top: 37%;
    z-index: 5;
    align-items: center;
    left: -15%;
    img {
      width: 27px;
      cursor: pointer;
    }
  }
}
.swiper-wrapper {
  z-index: 6;
}
</style>